<template>
    <div class="coupon">
        <!-- 导航 -->
        <div class="two-bothshop">
            <div class="maleri30">
                <ul>
                    <li :class="{ red: type == 0 }" @click="changeType(0)">
                        <a><span>未使用</span></a>
                    </li>
                    <li :class="{ red: type == 1 }" @click="changeType(1)">
                        <a><span>已使用</span></a>
                    </li>
                    <li :class="{ red: type == 2 }" @click="changeType(2)">
                        <a><span>已过期</span></a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 列表 -->
        <div class="coupon_csswri">
            <div class="maleri30">
                <ul id="user_goods_ka_1">
                    <li
                        v-for="(item, index) in pageListInfo.coupon_list"
                        :key="index"
                    >
                        <div class="cp_alo">
                            <div class="pon_top">
                                <h1>
                                    <em class="fosi">￥</em
                                    ><em>{{ item.money | money }}</em>
                                </h1>
                                <p>{{ item.use_scope }}</p>
                            </div>
                            <p class="cpn-name">{{ item.name }}</p>
                            <div class="pon_dow">
                                <!--<p>商城</p>-->
                                <p>满 {{ item.condition | money }} 元使用</p>
                                <a
                                    class="usecoupon"
                                    v-show="item.status == '0'"
                                    @click="$router.push('/shop')"
                                >
                                    立即使用</a
                                >
                                <a
                                    class="usecoupon"
                                    v-show="item.status == '1'"
                                >
                                    已使用</a
                                >
                                <a
                                    class="usecoupon"
                                    v-show="item.status == '2'"
                                >
                                    已过期</a
                                >
                                <p class="xd_time">
                                    {{ item.use_start_time_text }} -
                                    {{ item.use_end_time_text }}
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 缺省页面 -->
        <component
            :is="'ContentNone'"
            :isgoShop="false"
            v-show="
                pageListInfo.coupon_list.length == 0 && pageInfo.pageSatus
            "
        ></component>

        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            type: 0,
            pageListInfo: {
                coupon_list: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.pageListInfo.coupon_list = [];
        this.pageInfo.pageSatus = false;
        this.getList();
    },
    methods: {
        changeType(type) {
            this.type = type;
            this.pageListInfo.coupon_list = [];
            this.pageInfo.pageSatus = false;
            this.getList();
        },
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getList(data); // 根据type获取订单
        },
        // 获取列表
        getList(page = 1, page_size = 10) {
            axiosPost(
                '/api/user/coupon',
                {
                    type: this.type,
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.coupon_list.forEach((element) => {
                        this.pageListInfo.coupon_list.push(element);
                    });

                    this.pageListInfo.page = res.data.page;
                    this.pageListInfo.user_money = res.data.user_money;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.coupon {
    .coupon_csswri ul li:nth-child(2n) {
        float: left;
    }
    .two-bothshop ul li {
        width: 33%;
        height: 1.98rem;
        line-height: 1.98rem;
        font-size: 0.64rem;
        position: relative;
    }
    .two-bothshop ul .red span {
        color: #f23030;
    }
    .two-bothshop ul .red {
        border: none;
    }
    .two-bothshop ul .red:before {
        content: '';
        display: block;
        width: 1.07rem;
        height: 0.11rem;
        background-color: #ff4139;
        position: absolute;
        bottom: 0;
        left: 1.9rem;
    }
    .btTab {
        width: 100%;
        height: 2rem;
        bottom: 0;
        position: fixed;
        background-color: #fff;
    }
    .h-public {
        width: 50%;
        border: 0.03rem solid #bfbfbf;
        height: 100%;
        float: left;
        box-sizing: border-box;
        text-align: center;
        line-height: 2rem;
        font-size: 0.65rem;
        color: #da0202;
        background-color: #ffffff;
    }
    .h-coupon {
        position: absolute;
        width: 12rem;
        height: 6rem;
        background-color: #ffffff;
        top: 9rem;
        left: 50%;
        margin-left: -6rem;
        border-radius: 0.3rem;
        overflow: hidden;
    }
    .h-coupon p {
        height: 1.6rem;
        text-align: center;
        font-size: 0.65rem;
        line-height: 1.6rem;
        border-bottom: 1px solid #bfbfbf;
    }
    .h-coupon input {
        display: block;
        height: 1.6rem;
        width: 8rem;
        margin: 0 auto;
        font-size: 0.65rem;
        text-align: center;
        border: none;
        margin: 0.6rem auto;
        outline: none;
    }
    .h-coupon span {
        display: inline-block;
        width: 50%;
        height: 1.6rem;
        float: left;
        text-align: center;
        font-size: 0.65rem;
        line-height: 1.6rem;
        border: 1px solid #bfbfbf;
        border-right: none;
        border-bottom: none;
    }
    .h-crt {
        background-color: #ff0000;
        color: #ffffff;
    }
    .c-mask {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        top: 0;
        display: none;
    }
    .content {
        background-color: #ffffff;
    }
    .coupon_csswri ul li {
        width: 14.72rem;
        margin-top: 0.58rem;
        margin-left: 0.4rem;
    }
    .coupon_csswri ul li .cp_alo {
        width: 14.72rem;
    }
    .cp_alo .pon_top {
        width: 5.33rem;
        height: 3.67rem;
        background-color: #ff3030;
        background: url(../../assets/images/cpn.png) no-repeat 100% 100%;
        padding: 0;
        overflow: hidden;
        float: left;
        background-size: 5.33rem;
    }
    .cp_alo .pon_top h1 {
        width: 100%;
        text-align: center;
        padding: 0;
        font-size: 1.54rem;
        font-family: 'DIN';
        margin: 0.9rem 0 0.38rem;
    }
    .cp_alo .pon_top h1 .fosi {
        font-size: 0.64rem;
    }
    .cp_alo .pon_top p {
        padding: 0 !important;
        margin: 0;
        font-size: 0.47rem;
        text-align: center;
    }
    .coupon_csswri ul li .cp_alo p.cpn-name {
        width: 8rem;
        font-size: 0.55rem;
        color: #1e1e1e;
        float: left;
        margin-left: 0.55rem;
        margin-top: 0.53rem;
    }
    .cp_alo .pon_dow .usecoupon {
        float: right;
        height: 0.94rem;
        border-radius: 0.47rem;
        border: solid 0.02rem #ff3030;
        font-size: 0.47rem;
        color: #ff3030;
        padding: 0.26rem 0.4rem;
        width: auto;
    }
    .cp_alo .pon_dow p {
        min-width: 8rem;
        padding: 0.34rem 0 0.45rem 0.55rem;
    }
    .coupon_csswri ul li .xd_time {
        padding: 0;
        min-width: 6rem;
        width: 6rem;
        padding-left: 0.55rem;
        font-size: 0.47rem;
        color: #666666;
        margin-top: 0.34rem;
    }
    .cp_alo .pon_dow {
        height: 3.67rem;
    }
}
</style>
